
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>The MathZoom extension &mdash; MathJax v2.0 documentation</title>
    <link rel="stylesheet" href="../_static/mj.css" type="text/css" />
    <link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
    <script type="text/javascript">
      var DOCUMENTATION_OPTIONS = {
        URL_ROOT:    '../',
        VERSION:     '2.0',
        COLLAPSE_INDEX: false,
        FILE_SUFFIX: '.html',
        HAS_SOURCE:  true
      };
    </script>
    <script type="text/javascript" src="../_static/jquery.js"></script>
    <script type="text/javascript" src="../_static/underscore.js"></script>
    <script type="text/javascript" src="../_static/doctools.js"></script>
    <!--<script type="text/javascript" src="../../../MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>-->
    <link rel="top" title="MathJax v2.0 documentation" href="../index.html" />
    <link rel="up" title="Configuration Objects" href="index.html" />
    <link rel="next" title="The MathEvents extension" href="MathEvents.html" />
    <link rel="prev" title="The MathMenu extension" href="MathMenu.html" /> 
  </head>
  <body>
    
    <div class="related">
      <h3>Navigation</h3>
      <ul>
        <li class="right" style="margin-right: 10px">
          <a href="../genindex.html" title="General Index"
             accesskey="I">index</a></li>
        <li class="right" >
          <a href="MathEvents.html" title="The MathEvents extension"
             accesskey="N">next</a> |</li>
        <li class="right" >
          <a href="MathMenu.html" title="The MathMenu extension"
             accesskey="P">previous</a> |</li>
        <li><a href="../index.html">MathJax v2.0 documentation</a> &raquo;</li>
          <li><a href="index.html" accesskey="U">Configuration Objects</a> &raquo;</li> 
      </ul>
    </div>  

    <div class="document">
      <div class="documentwrapper">
        <div class="bodywrapper">
          <div class="body">
            
  <div class="section" id="the-mathzoom-extension">
<span id="configure-mathzoom"></span><h1>The MathZoom extension<a class="headerlink" href="#the-mathzoom-extension" title="Permalink to this headline">¶</a></h1>
<p>The options below control the operation of the Math-Zoom feature that
allows users to see an enlarged version of the mathematics when they
click or hover over typeset mathematics.  They are listed with their
default values.  To set any of these options, include a <tt class="docutils literal"><span class="pre">MathZoom</span></tt>
section in your <tt class="xref py py-meth docutils literal"><span class="pre">MathJax.Hub.Config()</span></tt> call.  For example</p>
<div class="highlight-javascript"><div class="highlight"><pre><span class="nx">MathJax</span><span class="p">.</span><span class="nx">Hub</span><span class="p">.</span><span class="nx">Config</span><span class="p">({</span>
  <span class="nx">MathZoom</span><span class="o">:</span> <span class="p">{</span>
    <span class="nx">styles</span><span class="o">:</span> <span class="p">{</span>
      <span class="s2">&quot;#MathJax_Zoom&quot;</span><span class="o">:</span> <span class="p">{</span>
        <span class="s2">&quot;background-color&quot;</span><span class="o">:</span> <span class="s2">&quot;#0000F0&quot;</span>
      <span class="p">}</span>
    <span class="p">}</span>
  <span class="p">}</span>
<span class="p">});</span>
</pre></div>
</div>
<p>would set the background color of the Zoom box to a very light blue.</p>
<p>Mathematics is zoomed when the user &#8220;triggers&#8221; the zoom by an action,
either clicking on the mathematics, double-clicking on it, or holding
the mouse still over it (i.e., &#8220;hovering&#8221;).  Which trigger is used is
set by the user via the math contextual menu (or by the author using
the <tt class="docutils literal"><span class="pre">menuSettings</span></tt> configuration section of the <cite>core configuration
options &lt;configure-hub&gt;</cite>).</p>
<dl class="describe">
<dt>
<tt class="descname">delay: 500</tt></dt>
<dd><p>This value is now stored as the <tt class="docutils literal"><span class="pre">hover</span></tt> parameter in the
<a class="reference internal" href="MathEvents.html#configure-mathevents"><em>MathEvents</em></a> configuration options, and
will have no effect if given here.</p>
</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">styles: {}</tt></dt>
<dd><p>This is a list of CSS declarations for styling the zoomed
mathematics.  See the definitions in <tt class="docutils literal"><span class="pre">extensions/MathZoom.js</span></tt>
for details of what are defined by default.  See <a class="reference internal" href="../CSS-styles.html#css-style-objects"><em>CSS Style
Objects</em></a> for details on how to specify CSS
style in a JavaScript object.</p>
</dd></dl>

</div>


          </div>
        </div>
      </div>
      <div class="sphinxsidebar">
        <div class="sphinxsidebarwrapper">
  <h4>Previous topic</h4>
  <p class="topless"><a href="MathMenu.html"
                        title="previous chapter">The MathMenu extension</a></p>
  <h4>Next topic</h4>
  <p class="topless"><a href="MathEvents.html"
                        title="next chapter">The MathEvents extension</a></p>
<div id="searchbox" style="display: none">
  <h3>Quick search</h3>
    <form class="search" action="../search.html" method="get">
      <input type="text" name="q" size="18" />
      <input type="submit" value="Go" />
      <input type="hidden" name="check_keywords" value="yes" />
      <input type="hidden" name="area" value="default" />
    </form>
    <p class="searchtip" style="font-size: 90%">
    Enter search terms or a module, class or function name.
    </p>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
        </div>
      </div>
      <div class="clearer"></div>
    </div>
    <div class="related">
      <h3>Navigation</h3>
      <ul>
        <li class="right" style="margin-right: 10px">
          <a href="../genindex.html" title="General Index"
             >index</a></li>
        <li class="right" >
          <a href="MathEvents.html" title="The MathEvents extension"
             >next</a> |</li>
        <li class="right" >
          <a href="MathMenu.html" title="The MathMenu extension"
             >previous</a> |</li>
        <li><a href="../index.html">MathJax v2.0 documentation</a> &raquo;</li>
          <li><a href="index.html" >Configuration Objects</a> &raquo;</li> 
      </ul>
    </div>
    <div class="footer">
        &copy; Copyright 2012 Design Science.
      Created using <a href="http://sphinx.pocoo.org/">Sphinx</a> 1.0.7.
    </div>
    
  </body>
</html>